import { Vue, Component } from 'vue-property-decorator'
// import PDFJS from 'pdfjs-dist'
import styles from './styles.less'
// import axios from 'axios'

// let pdfDoc: PDFJS.PDFDocumentProxy
// PDFJS.cMapUrl = '/node_modules/pdfjs-dist/cmaps'

@Component({})
export default class HelpView extends Vue {
  title: string = ''
  address: string = ''
  subtitle: string = ''
  link: any = {
    label: '电子印章新申领、更新点此进入',
    href: `${window.origin || window.location.origin}/login`,
  }
  data: any = []
  currentPdf: any = {}
  pdfBoxEl: any
  tabsIndex: number = 0
  showPdfBox: Boolean = false
  // cMapsUrl: string = 'https://unpkg.com/pdfjs-dist@2.1.266/cmaps/'
  // cMapsUrl: string = '//unpkg.com/pdfjs-dist@2.1.266/cmaps/'
  // workerSrc: string = '//mozilla.github.io/pdf.js/build/pdf.worker.js'

  protected render() {
    return (
      <div class={styles.helpView}>
        <header>
          <div class={styles.logoBox}>
            <div class={styles.logo} />
            <div class={styles.right}>
              <h1>{this.title}</h1>
              {/* <p>{this.subtitle}</p> */}
            </div>
          </div>
          <a target="_blank" href={this.link.href}>
            {this.link.label}
          </a>
        </header>
        <main>
          <div
            className="doc-display-box"
            style={{ display: this.showPdfBox ? 'none' : 'block' }}
          >
            <ul class={styles.tabsBox}>
              {this.data.length > 0 &&
                this.data.map((item: { tabName: string }, index: number) => {
                  return (
                    <li
                      class={[
                        styles.tabsItem,
                        { [styles.hold]: index === this.tabsIndex },
                      ]}
                      onClick={() => this.tabsEvt(index)}
                    >
                      {item.tabName}
                    </li>
                  )
                })}
            </ul>

            <ul class={styles.tabsContentBox}>
              {this.data.length > 0 &&
                this.data.map(
                  (
                    item: {
                      docbox: any
                    },
                    index: number
                  ) => {
                    const list = item.docbox.map((doc: any) => {
                      return (
                        <div class={styles.docListBox}>
                          <div class={styles.header}>
                            <h2>{doc.title}</h2>
                            <p>{doc.description}</p>
                          </div>
                          <div class={styles.body}>
                            {doc.list.map((link: any) => {
                              if (
                                (link.label + (link.subtitle || '')).length >
                                  18 &&
                                item.docbox.length > 2
                              ) {
                                return (
                                  <a onClick={() => this.download(link)}>
                                    <el-tooltip
                                      class="item"
                                      effect="dark"
                                      content={
                                        link.label + (link.subtitle || '')
                                      }
                                      placement="top"
                                    >
                                      <p>
                                        {link.label}
                                        {link.subtitle && (
                                          <em>{link.subtitle}</em>
                                        )}
                                      </p>
                                    </el-tooltip>
                                    {!link.disabled && <span>点击下载</span>}
                                  </a>
                                )
                              }

                              return (
                                <a onClick={() => this.download(link)}>
                                  <p>
                                    {link.label}
                                    {link.subtitle && <em>{link.subtitle}</em>}
                                  </p>
                                  {!link.disabled && <span>点击下载</span>}
                                </a>
                              )

                              // return (<div class={styles.item}><p>{link.label}</p><a>下载</a></div>)
                            })}
                          </div>
                        </div>
                      )
                    })

                    return (
                      <li
                        style={{
                          display: index === this.tabsIndex ? 'block' : 'none',
                        }}
                      >
                        <div class={styles.docContentBox}>{list}</div>
                      </li>
                    )
                  }
                )}
            </ul>
          </div>

          {/* <div class={styles.pdfPreviewBox} style={{display: this.showPdfBox ? 'block' : 'none'}}>
            <div class={styles.header}>
              <button onClick={() => this.showPdfBox = false}></button>
              <h3 onClick={() => this.showPdfBox = false}>{this.currentPdf.label}</h3>
              <a href={this.currentPdf.download} download>下载</a>
            </div>
            <div id="pdf-view-box" class={styles.pagesBox}>

            </div>
              <canvas id="pdf"></canvas>
          </div> */}

          <ul class={styles.contactBox}>
            {this.data.length > 0 &&
              this.data.map(
                (
                  item: {
                    concat: any
                  },
                  index: number
                ) => {
                  const ddtalkHTML = function() {
                    if ('ddtalk' in item.concat) {
                      return (
                        <div class={styles.qrcodeBox}>
                          {/* <div class={styles.icon}></div> */}
                          <div class={styles.info}>
                            <h4>{item.concat.ddtalk.title}</h4>
                            <p>{item.concat.ddtalk.description}</p>
                          </div>
                        </div>
                      )
                    }
                  }

                  return (
                    <li class={{ [styles.hide]: index !== this.tabsIndex }}>
                      {ddtalkHTML()}
                      <div class={styles.telBox}>
                        <div class={styles.icon} />
                        <div class={styles.info}>
                          <h4>{item.concat.tel.title}</h4>
                          <p>{item.concat.tel.description}</p>
                        </div>
                      </div>
                    </li>
                  )
                }
              )}
          </ul>
        </main>
      </div>
    )
  }

  private mounted() {
    this.title = window.helpConfig.title
    // this.address = window.helpConfig.address
    // this.link = Object.assign({}, json.link)
    this.data = window.helpConfig.tabs
    // this.subtitle = window.helpConfig.subtitle

    // this.pdfBoxEl = this.$el.querySelector('#pdf-view-box')

    //   axios({
    //     url: 'static/helpConfig.js',
    //     method: 'GET'
    //   }).then(res => {
    //     let json = Function (`return ${res.data.slice(10)}`)()

    //     this.title = json.title
    //     this.address = json.address
    //     // this.link = Object.assign({}, json.link)
    //     this.data = json.tabs
    //   }).catch(err => {
    //     this.$message.error('出错了！请稍后再试！')
    //   })
    //   console.log(8)
  }

  private download(obj: any) {
    if (!obj.disabled) {
      const origin = window.origin || window.location.origin

      window.open(`${origin}${obj.download}`, '_blank')
    }
  }

  private tabsEvt(item: number) {
    this.tabsIndex = item
  }

  // private showPdf (link: any, title: string) {
  //   PDFJS.GlobalWorkerOptions.workerSrc = this.workerSrc;
  //   let params = {
  //     url: link.path,
  //     cMapUrl: this.cMapsUrl,
  //     cMapPacked: true
  //   }

  //   this.currentPdf = {...link, label: title}

  //   if (!params.url) return

  //   this.showPdfBox = true
  //   this.pdfBoxEl.innerHTML = '加载中...'
  //   PDFJS.getDocument(params).promise.then((pdf: any) => {
  //     pdfDoc = pdf
  //     pageNumber = 1

  //     this.createPdfPages(pdf._pdfInfo.numPages)

  //     for (let i = 0; i < pdf._pdfInfo.numPages; i++) {
  //       this.renderPage(i+1)
  //     }
  //   }, (resason: string) => {
  //     console.log('请将此信息报告给技术人员：', resason)
  //     this.pdfBoxEl.innerHTML = `<div class=${styles.errorBox}><p>抱歉，可刷新页面或联系技术支持人员</p></div>`
  //   })
  // }

  // private createPdfPages (size: number) {
  //   let { width } = this.pdfBoxEl.getBoundingClientRect()
  //   let fragment = document.createDocumentFragment();

  //   for (let i = 0; i < size; i++) {
  //     let canvas = document.createElement('canvas')
  //     canvas.width = width
  //     canvas.id = `pdf-page-${i +1}`

  //     fragment.appendChild(canvas)
  //   }

  //   this.pdfBoxEl.innerHTML = ''
  //   this.pdfBoxEl.appendChild(fragment)
  // }

  // private renderPage(pageNumber: number) {
  //   pdfDoc.getPage(pageNumber).then(page => {
  //     let scale = 3
  //     let viewport = page.getViewport({scale})

  //     let canvas: any = this.$el.querySelector(`#pdf-page-${pageNumber}`)
  //     let ctx = canvas.getContext('2d')
  //     canvas.width = viewport.width
  //     canvas.height = viewport.height

  //     let renderContext = {
  //       canvasContext: ctx,
  //       viewport
  //     }

  //     page.render(renderContext)
  //   })
  // }
}
